<template>
  <s-layout :mainBackground="'#FFEDC7'" class="chat-wrap" color="#000000" title="中华姓氏" navbar="inner"
            :is_main-body="true"
            :customBody="customBody()" :is_mainBody="false" :bg-style="{color:'#FFEDC7'}"
            :is_back="true" backgroundColor="#FFEDC7"
            :ncShareInfo="page.ncShareInfo"
            onShareAppMessage
  >
    <view class="wh_750 flex-sub">
      <view class="wh_750">
        <!-- 顶部栏 -->
        <topBar id="topBar" :titleList="titleList" :header-height="layoutStyle.suTabsHeight + layoutStyle.statusHeight"
                @goPath="goPath"></topBar>
        <!-- 姓氏内容 -->
        <surnameContent :founder="state.founder" :scrollInfoView="state.scrollInfoView"
                        :header-height="layoutStyle.suTabsHeight + layoutStyle.statusHeight"
                        @ancestorLikes="ancestorLikes"></surnameContent>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { onLoad, onReady, onShow,onShareAppMessage } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import TopBar from '@/pages/chineseSurname/components/topBar.vue';
  import { computed, getCurrentInstance, nextTick, onMounted, reactive } from 'vue';
  import SurnameContent from '@/pages/chineseSurname/components/surnameContent.vue';
  import { h5_url } from '@/sheep/config';

  const { proxy } = getCurrentInstance();
  const state = reactive({
    founder: {},
    scrollInfoView: '',
  });
  const page = reactive({
    options: {},
    ncShareInfo: {
      title: '',
      path: '',
    },
  });
  const layoutStyle = reactive({
    suTabsHeight: 0,
    statusHeight: sheep.$platform.navbar,
  });
  // #ifdef H5
  const userInfo = computed(() => JSON.parse(uni.getStorageSync('user-store')).userInfo);
  // #endif
  // #ifndef H5
  const userInfo = computed(() => sheep.$store('user').userInfo);
  // #endif
  const titleList = computed(() => {
    return [
      { name: `${state.founder.surname}姓始祖`, index: 0 },
      { name: `${state.founder.surname}姓起源`, index: 1 },
      { name: '迁徙分布', index: 2 },
      { name: '郡望堂号', index: 3 },
      { name: '宗祠对联', index: 4 },
      { name: '典故趣事', index: 5 },
      { name: '家风家训', index: 6 },
      { name: '祠堂分布', index: 7 },
      { name: '字辈排行', index: 8 },
      { name: '家谱文献', index: 9 },
      { name: `${state.founder.surname}姓名人`, index: 10 },
      { name: `${state.founder.surname}姓族徽`, index: 11 },
    ];
  });
  const bind_id = computed(() => sheep.$store('AI').bind_id);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };

  onLoad(async (options) => {
    page.options = options;
    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }
    uni.$on('goPath', goPath);
  });

  onReady(async () => {

    const { data } = await sheep.$api.surname.getSurnameDetail({
      id: page.options.id,
    });
    // #ifdef H5
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${data.surname}姓始祖`,
      link: `${h5_url}/#pages/chineseSurname/details_firstAncestor?id=${data.id}&spid=${userInfo.value.uid}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    // #endif
    state.founder = data;
    // #ifdef MP-WEIXIN
    page.ncShareInfo = {
      title: `${data.surname}姓始祖`,
      path: `/pages/chineseSurname/details_firstAncestor?id=${state.founder.id}&spid=${userInfo.value.uid}`,
    };
    // #endif
    nextTick(() => {
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#topBar').boundingClientRect((info) => {
        layoutStyle.suTabsHeight = info.height;
      }).exec();
    });
  });

  onShow(async () => {
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }
    const { data } = await sheep.$api.surname.getSurnameDetail({
      id: page.options.id,
    });
    state.founder.likes = data.likes;
    state.founder.comment = data.comment;
    console.log(state.founder);
  });

  function goPath(str) {
    state.scrollInfoView = str;
  }

  async function ancestorLikes() {
    const { data } = await sheep.$api.family.surnameClick({
      id: state.founder.id,
    });
    state.founder.likes++;
    state.founder.is_like = 1;
  }
</script>

<style lang="scss">

</style>
